// pages/index/index.tsx
import React, { useState } from 'react'
import {View, Text} from '@tarojs/components'
import HeaderTitle from "@/components/HeaderTitle";
import {defaultUser, UserModel, UserType} from "@/shared/services/model/user";
import {Button, Checkbox, Image} from '@nutui/nutui-react-taro'
import './index.scss'
import MyListItem from "@/components/MyListItem";
import balanceIcon from '@/assets/balance.png'
import serviceIcon from '@/assets/icon_service.png'
import myIcon from '@/assets/icon_my.png'
import aboutIcon from '@/assets/icon_about.png'
import Taro, {setStorageSync} from "@tarojs/taro";


const Index: React.FC = () => {
  const [user, setUser] = useState<UserModel>(defaultUser)

  const phoneNumber = '13270665702'

  const callPhone = async () => {
    try {
      // 可以先确认
      const res = await Taro.showModal({
        title: '提示',
        content: `确定要拨打 ${phoneNumber} 吗？`,
        confirmText: '拨打',
        cancelText: '取消'
      })

      if (res.confirm) {
        await Taro.makePhoneCall({
          phoneNumber: phoneNumber
        })
        console.log('拨打电话成功')
      }
    } catch (error) {
      console.error('取消拨打电话', error)
      Taro.showToast({
        title: '取消拨打电话',
        icon: 'none'
      })
    }
  }

  const version = () => {
    Taro.showToast({
      title: '当前版本: 1.0.0',
      icon: 'none'
    })
  }

  const userProtocol = () => {
    Taro.navigateTo({
      url: `/pages/webview/index?src=https://www.baidu.com&title=用户服务协议`
    })
  }

  const ysProtocol = () => {
    Taro.navigateTo({
      url: `/pages/webview/index?src=https://www.baidu.com&title=隐私协议`
    })
  }

  const logout = () => {
    setStorageSync("token","")
    Taro.redirectTo({ url: '/pages/login/index' }
    )
  }

  return (
    <View className='pageContainer'>
      <HeaderTitle title={'个人资料'}></HeaderTitle>
      <View className="avatarBox">
        <Image className="avatar" src={user.avatar} width="100" height="100" fit="cover" radius="50%" />
        <View className="phoneBox">
          <Image
            className="item-icon"
            src={require('@/assets/icon_phone.png')}
            width={20}
            height={20}
          />
          <Text className="phone">{user.phone}</Text>
        </View>
      </View>

      <View className="profile-content">
        <MyListItem
          title="用户服务协议"
          icon={myIcon} // 在外部使用 require
          iconSize={20}
          onClick={userProtocol}
          showBottomBorder={true}
          showArrow={true}
        />

        <MyListItem
          title="隐私协议"
          onClick={ysProtocol}
          icon={myIcon} // 在外部使用 require
          iconSize={20}
          showBottomBorder={true}
          showArrow={true}
        />

        <MyListItem
          title="版本信息"
          value="1.0.0"
          icon={aboutIcon} // 在外部使用 require
          iconSize={20}
          showBottomBorder={true}
          showArrow={true}
          onClick={version}
        />

        <MyListItem
          title="联系电话"
          value="13270665702"
          icon={serviceIcon} // 在外部使用 require
          iconSize={20}
          onClick={callPhone}
          showBottomBorder={false}
          showArrow={true}
        />
      </View>

      <View className='bottom'>
        <Button
          block
          className='toLogin'
          type='primary'
          color={'#121214'}
          onClick={logout}
        >
          退出登录
        </Button>

      </View>
    </View>
  )
}

export default Index
